<template>
	<div class="">
		<!-- 数据动态更新图片会闪烁，解决方案：img替换image -->
		<img :class="['c-image ', className]" v-if="src&&!previewShow" :src="src" :mode="mode" lazy-load="true" />
    <!-- 预览图片-->
    <el-image
      v-else-if="src&&previewShow"
      :class="['c-image ', className]"
      mode="mode"
      lazy-load="true"
      :src="src"
      :preview-src-list="srcList">
    </el-image>
		<img class="c-image" v-else-if="logo" :src="logo" :mode="mode" />
		<img class="c-image" v-else-if="imagePrefix" :src="require(imagePrefix+'logo.png')" :mode="mode" />
	</div>
</template>

<script>
	import config from '@/api/config.js';
  export default {
    name: "c-image",
    props: {
      src: {
        type: String,
        default: ''
      },
      logo: {
        type: String,
        default: config.baseUrl + 'logo.png'
      },
      mode: {
        type: String,
        default: 'aspectFill',
      },
      className: {
        type: String,
        default: ''
      },
      // 预览图片
      previewShow:{
        type: Boolean,
        default: false
      },
      srcList: {
        type: Array,
        default: ()=>{
          return []
        },
      },
    },
	data() {
	  return {
	    imagePrefix: config.imagePrefix,
	  };
	},
	created() {
	  // 兼容小程序写法
	  this.imagePrefix = config.imagePrefix
	},
  }
</script>

<style lang="less" scoped>
  .c-image {
    height: 100%;
    width: 100%;
    display: block;
  }
</style>
